<template>
	<div class="city">
		<div class="city-bottomone">
			<h2>定位/附近城市</h2>
			<ul>
				<li>{{show}}</li>
			</ul>
		</div>
		<div class="city-bottomtwo">
			<h2>热门城市</h2>
			<ul>
				<li v-for="item in CityList" :key='item.code'  @click="toHome(item.name)" :class="{'default':show==item.name}">
					{{item.name}}
				</li>
			</ul>
		</div>
		<div class="city-bottomthree">
			<article v-for="(item,index) in CityPerson" :key='index'>
				<p>字母{{item.initial}}开头的城市</p>
				<ul>
					<li v-for="key in item.list" :key='key.code' @click="toHome(key.name)" :class="{'default':show==key.name}">
						{{key.name}}
					</li>
				</ul>
			</article>
		</div>
	</div>
</template>

<script>
	
	import {mapMutations,mapState} from 'vuex'
	
	export default{
		name:'CitySon',
		data(){
			return{
				CityList:[],
				CityPerson:[],
				show:'广州',
			}
		},
		created() {
			let that=this
			this.axios.get('/api/city.json').then((res)=>{
				if (res.status===200) {
					let data=res.data.data
					that.CityList=data.hotCities
					that.CityPerson=data.city
				}
			}).catch((error)=>{
				console.log(error)
			})
		},
		methods:{
			toHome(cname){
				this.show=this.cityName
				this.changeCity(cname)
				this.$router.push('/')
			},
			...mapMutations(['changeCity'])
		},
		mounted() {
			if (localStorage.city) {
				this.show=localStorage.city
			}
		}
	}
</script>

<style scoped>
	.city-bottomthree  ul .default{
		background-color: #FED101;
		color: white;
	}
	.city-bottomtwo  ul .default{
		background-color: #FED101;
		color: white;
	}
	.city-bottomone{
		width: 100%;
		height: 2rem;
		background-color: white;
	}
	.city-bottomone h2{
		font-size: 0.45rem;
		padding: 0.3rem 0 0.2rem 0.2rem;
		color: gray;
	}
	.city-bottomone ul{
		margin: 0 0.3rem;
	}
	.city-bottomone li{
		background-color: #e6e6e6;
		width: 14%;
		padding: 0.2rem 0.15rem;
		font-size: 0.3rem;
		border-radius: 0.2rem;
		color: gray;
		text-align: center;
	}
	.city-bottomtwo{
		width: 100%;
		height:4rem;
		border-bottom: 1px solid gray;
	}
	.city-bottomtwo h2{
		font-size: 0.45rem;
		padding: 0.5rem 0 0.2rem 0.1rem;
		color: gray;
	}
	.city-bottomtwo ul{
		margin-left: 0.5rem;
		
	}
	.city-bottomtwo ul li{
		float: left;
		font-size: 0.3rem;
		width: 14%;
		padding: 0.2rem 0 0.3rem 0;
		text-align: center;
		margin-right: 0.2rem;
		margin-top: 0.3rem;
		background-color:#e6e6e6;
		border-radius: 0.2rem;
		color: gray
	}
	.city-bottomthree{
		width: 100%;
		overflow: hidden;
	}
	.city-bottomthree article{
		width: 100%;
		overflow: hidden;
		border-bottom: 1px solid #808080;
	}
	.city-bottomthree article p{
		font-size: 0.42rem;
		padding: 0.2rem 0 0.2rem 0.3rem;
		color: gray
	}
	.city-bottomthree article ul{
		margin-left: 0.4rem;
	}
	.city-bottomthree article ul li{
		float: left;
		font-size: 0.3rem;
		width: 14%;
		padding: 0.2rem 0 0.2rem 0;
		text-align: center;
		margin-right: 0.2rem;
		margin-top: 0.3rem;
		margin-bottom: 0.3rem;
		background-color:#e6e6e6;
		border-radius: 0.2rem;
		color: gray
	}
</style>
